<template>
  <div id="app">
        <keep-alive>
           <router-view v-wechat-title="$route.meta.title"></router-view>
        </keep-alive>

     <footer>
         <router-link to="/questionnaire" @click.native="tabClick(0)" id="questionnaire">
               <i class="iconfont icon-text"></i>
              <span class="bthree">问卷</span>
             </router-link>
            <router-link to="/member" @click.native="tabClick(1)" id="member">
              <i class="iconfont icon-users2"></i>
              <span class="bone">寝室管理</span>
            </router-link>
             <router-link to="/mine" @click.native="tabClick(2)" id="mine">
              <i class="iconfont icon-user2"></i>
              <span class="bthree">我的</span>
             </router-link>
          </footer>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    /***切换tabbar***/
    tabClick(val) {
      let dom = document.querySelectorAll("footer a");
      for (let i = 0; i < dom.length; i++) {
        dom[i].style.color = "#949494";
      }
      dom[val].style.color = "#e3656f";
    }
  },
  mounted() {}
};
</script>

<style lang="scss">
@import "./assets/scss/base.scss";
#app {
  height: 100%;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  height: ptr(60px);
  font-size: ptr(14px);
  background-color: #fff;
  box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
footer a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33%;
  height: 100%;
  color: #949494;
}
footer i {
  height: ptr(35px);
  width: ptr(35px);
  text-align: center;
  line-height: ptr(35px);
  font-size: ptr(22px) !important;
}
.textActive {
  color: #f56c02;
}

/***适配iPhone X***/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  footer {
    padding-bottom: ptr(34px);
  }
}
</style>
